<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="img/favicon.png"/>

<script  type="text/javascript"	src="static/js/pageComm.js"></script>
<script  type="text/javascript"	src="static/js/pageListComm.js"></script>

<script type="text/javascript">
var currentPage;
var firstDeptID;
		$(function(){
		    //加载首页内容
		    to_page(1);
		    
		    $("#newGRoom").click(function(){

		    	//清空表单样式及内容
		 	   reset_form("#gRoomForm");

		 	//设置所有输入框可用
				textDisabled(false);
			 	//隐藏负责人显示框
				$("#GRoomAdmin").hide();
				//显示备注输入框
			 	$("#note").show();
			 	//显示保存框
				$("#saveGRoom").show();
				//设置模态框标题
				$("#gRoomLabel").text("新增机房信息");
				//加载所有部门
				//加载所有的部门信息  放入多选框中
				getAllDept("#deptSelect select","${APP_PATH}/deptGroup");
				
				//打开模态框
				$("#gRoomModal").modal({
					backdrop: "static"
				});
			});
		    
		    //保存机房信息
		    $("#saveGRoom").click(function(){
				
				//验证 机房名不能为空
				
				////新建机房
		    	if($("#gRoomIdHidden").val() == "" || $("#gRoomIdHidden").val() == null){
					//新建机房 返回最后一页//返回最后一页
					saveNewGRoom();
				}else{
					//是更新机房 返回当前页
					updateGRoomMessage();
				}
		
				
		    });
		    //保存  更新的 机房信息
		    function updateGRoomMessage(){
		    	
		    	//ajax提交
				$.ajax({
					url:"${APP_PATH}/gRoom",
					type:"PUT",
					data:$("#gRoomForm").serialize(),
					success:function(result){
						
						if(result.code == 200){
							 //显示失败消息  失败
							 alert(result.extend.msg);
							 //关闭模态框
						 }else{
							//是更新机房 返回当前页
								to_page(currentPage);
						 }
						//关闭模态框
						$("#gRoomModal").modal("hide");
					}
				});
		    }
		    //保存  新建的 机房信息
		    function saveNewGRoom(){
		    	
		    	//ajax提交
				$.ajax({
					url:"${APP_PATH}/gRoom",
					type:"POST",
					data:$("#gRoomForm").serialize(),
					success:function(result){
						 if(result.code == 200){
							 //显示失败消息  失败
							 alert(result.extend.msg);
							 //关闭模态框
						 }else{
							//新建机房 返回最后一页//返回最后一页
								to_page(9999);
						 }
						//关闭模态框
						$("#gRoomModal").modal("hide");
					}
				});
		    }
		    
		    $(document).on("click",".updateGRoom",function(){
		    	//显示负责人显示框
				$("#GRoomAdmin").show();
			 	//显示备注输入框
			 	$("#note").show();
			 	//显示保存框
				$("#saveGRoom").show();
				//设置模态框标题
				$("#gRoomLabel").text("修改机房信息");
				//加载所有的部门信息  放入多选框中
				getAllDept("#deptSelect select","${APP_PATH}/deptGroup");
			
				//根据id获取需要修改的 数据                    
				getGRoomByid($(this).attr("gRoomId"),"updateGRoom");
				//加载该部门？？
				
				//打开模态框
				$("#gRoomModal").modal({
					backdrop: "static"
				});
		    });
		    
		    
		    $(document).on("click",".gRoomInfo",function(){
			 	//隐藏负责人显示框
				$("#GRoomAdmin").show();
				//显示备注输入框
			 	$("#note").show();
				//设置模态框标题
				$("#gRoomLabel").text("机房详细信息");
				//隐藏保存框
				$("#saveGRoom").hide();
				//根据id获取所有的信息                
				getGRoomByid($(this).attr("gRoomId"),"gRoomInfo");
				//打开模态框
				$("#gRoomModal").modal({
					backdrop: "static"
				});
			});
		    
		  //删除一条信息
 			$(document).on("click",".deleteGRoom",function(){
 				var gRoomId=$(this).attr("gRoomId");
 				var gRoomName=$(this).attr("gRoomName");
 				
 				if(confirm("确认删除 【 "+ gRoomName+" 】 ？")){
 					$.ajax({
 						url:"${APP_PATH}/gRoom/"+gRoomId,
 						type:"DELETE",
 						success:function(result){
 							if(result.code == 200){
 								 //显示失败消息  失败
 								 alert(result.extend.msg);
 								 //关闭模态框
 							 }else{
 								// 返回当前页
 									to_page(currentPage);
 							 }
 						}
 					});
 				}
 				
 			});
 			
 			//删除多条消息
 			$("#deleteGRoomList").click(function(){
 				
 				var checked=$("#gRoomTable tbody input:checked");

 				 var gRoomIds="";
 				 var gRoomName="";
 				 checked.each(function(index,value){
 					gRoomName += $(this).attr("gRoomName")+",";
 					gRoomIds += $(this).attr("gRoomId")+"-";
 				 });
 				 gRoomName=gRoomName.substring(0,gRoomName.length-1);
 				gRoomIds=gRoomIds.substring(0,gRoomIds.length-1);

 				 if(confirm("确认要删除 【 "+gRoomName+" 】 吗？")){
 					 $.ajax({
 						 url:"${APP_PATH}/gRoom/"+gRoomIds,
 						 type:"DELETE",
 						 success:function(result){
 							if(result.code == 200){
								 //显示失败消息  失败
								 alert(result.extend.msg);
								 //关闭模态框
							 }else{
								// 返回当前页
									to_page(currentPage);
							 }
 						 }
 					 });
 				 }
 			});
		    
		    
		    //部门多选框被选中时 查询该部门下的所有员工
		    $("#deptSelect select").change(function(){
		    	//只有在更新的时候才有效
		    	if($("#gRoomIdHidden").val() != "" && $("#gRoomIdHidden").val() != null){
					//新建机房 返回最后一页//返回最后一页
		    		//是更新机房 返回当前页
					var deptId=$(this).val();
		    	    getUsersByDeptId("${APP_PATH}/user/"+deptId,"#GRoomAdmin select");
				}
				
		    	
		    });
		    
		   
			
		})	
		//根据id获取机房信息
		function getGRoomByid(gRoomId,action){
			$.ajax({
      			url:"${APP_PATH}/gRoom/"+gRoomId,
      			type:"GET",
      			success:function(result){
      				//将获取的信息显示在响应位置
      				showGRoom(result.extend.gRoom,action);
      			}
      		});	
		}
		//将根据id获取的信息显示在文本框里面
		function showGRoom(gRoom,action){
			$("#gRoomIdHidden").val(gRoom.id);
			$("#groomName").val(gRoom.groomName);
			
			if(action == "updateGRoom"){
				//是更新操作  需要选中该机房的部门名称
				if(gRoom.deptId !=null && gRoom.deptId!=""){
					$("#deptSelect select").val(gRoom.deptId);
					
					//获取该部门下的所有的员工
					getUsersByDeptId("${APP_PATH}/user/"+gRoom.deptId,"#GRoomAdmin select");
				}
				
				if(gRoom.userId != null && gRoom.userId != ""){
					$("#GRoomAdmin select").val(gRoom.userId);
				}
				//设置所有输入框可用
				textDisabled(false);
			}else{
				//显示机房详细信息  只需显示 部门名称和用户名  并设施所有的输入框均不可输入
				$("#deptSelect select").empty();
				if(gRoom.department !=null && gRoom.department !=""){
					$("#deptSelect select").append(
							$("<option></option>")
							.html(gRoom.department.deptName));
				}
				
				$("#GRoomAdmin select").empty();
				if(gRoom.user != null && gRoom.user != ""){
					$("#GRoomAdmin select").append(
							$("<option></option>")
							.html(gRoom.user.username));
				}
				//设置所有输入框不可用
				textDisabled(true);
	
			}
			
			
			$("#groomAddress").val(gRoom.groomAddress);
			$("#groomRemark").val(gRoom.groomRemark);
		}
		
		//设置输入框可用获取不可用 ，true 不可用，false可用
		 function textDisabled(flag){
			 $("#groomName").attr("disabled",flag);
				$("#deptSelect select").attr("disabled",flag);
				$("#GRoomAdmin select").attr("disabled",flag);
				$("#groomAddress").attr("disabled",flag);
				$("#groomRemark").attr("disabled",flag);
		}      
			    //去指定的分页
			      function to_page(pn){
			      		$.ajax({
			      			url:"${APP_PATH}/roomList",
			      			data:"pn="+pn,
			      			type:"GET",
			      			success:function(result){
			      				//判断返回信息是否为空
			      				
			      					 //2. 解析并显示分页数据
					 				   build_page_info(result);
					 				   //解析显示分页条
					 				   build_page_nav(result);
					 					//1. 解析并显示员工数据
					 				   build_emps_table(result);
			      				
			 				  
			      			}
			      		});	
			      }
		//清空表单 
		function  clearTable(ele,msg){
			$(ele).empty();
			$(ele).append($("<h1>"+msg+"<h1>").attr("align","center"));
		}
			  
			  	//1. 解析并显示员工数据
				function build_emps_table(result){
					//清空table表格
			  		$("#gRoomTable tbody").empty();

					//获取返回的dept值
					var gRoom=result.extend.pageInfo.list;
					$.each(gRoom,function(index,item){
						var checkboxTd=$("<td></td>").append($("<input></input>")
								.addClass("checkbox")
								.attr("gRoomName",item.groomName)
								.attr("gRoomId",item.id)
								.attr( "type","checkbox")).attr("align","center");
						
						var idTd=$("<td></td>").addClass("gRoomInfo").append(item.id);
						var groomNameTd=$("<td></td>").addClass("gRoomInfo").append(item.groomName);
						groomNameTd.attr("gRoomId",item.id);
						idTd.attr("gRoomId",item.id);
						//alert(item.user);
						if(item.user ==null || item.user == "" || undefined == item.user){
							var adminTd=$("<td></td>");
						}else{
							var adminTd=$("<td></td>").append(item.user.username)
						}
						
						if(item.department ==null || item.department == "" || undefined == item.department){
							var deptTd=$("<td></td>");
						}else{
							var deptTd=$("<td></td>").append(item.department.deptName);
						}
						
						
						
						
						var editBtn=$("<a></a>").addClass("updateGRoom").addClass("btn btn-primary").append("修改");
						var deleteBtn=$("<a class='btn btn-danger deleteGRoom' >删除</a>")
						editBtn.attr("gRoomId",item.id);
						deleteBtn.attr("gRoomId",item.id);
						deleteBtn.attr("gRoomName",item.groomName);
						var btnGroupTd=$("<td style='text-align:center;'></td>").append($("<div></div>").addClass("btn-group"));
						
						btnGroupTd.append(editBtn).append(deleteBtn);
						
						$("<tr></tr>").append(checkboxTd)
									  .append(idTd)
									  .append(groomNameTd)
									  .append(adminTd)
									  .append(deptTd)
									  .append(btnGroupTd)
									  .appendTo($("#gRoomTable tbody"));
						
					});
			  	}
			
			
		
			
			
			
			
		
		
		</script>
</head>


  <body>
  <!-- 模态框 -->
  <%@include file="/WEB-INF/include/generatorRoomModal.jsp" %>
  
  <!-- container section start -->
  <section id="container" class="">
      <%@include file="/WEB-INF/include/top.jsp"%>

      <%@include file="/WEB-INF/include/left.jsp"%>

      <!--main content start-->
      <section id="main-content" >
          <section class="wrapper">
		  <div class="row">
				<div class="col-lg-12">
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.jsp">机房管理</a></li>
						<li><i class="fa fa-table"></i>机房信息</li>
					</ol>
					
				</div>
			</div>
	          
             
            
            
              <div class="row" align="center" style="margin:0 auto">
                  <div class="col-lg-12">
                      <section class="panel">
                        
                          <table class="table table-striped table-advance table-hover" id="gRoomTable" >
                           <thead>
                           	  <tr>
                                 <th width="8%" style="text-align:center;"><input type="checkbox" id="checkAll" /></th>
                                 <th width="10%">ID</th>
                                 <th width="27%">机房名称</th>
                                 <th width="17%">负责人</th>
                                 <th width="16%">所属部门人</th>
                                 <th width="22%" style="text-align: center;"><span>操作&nbsp;&nbsp;&nbsp;</span>
                                 	<span class="btn-group" >
                                      <a class="btn btn-primary" id="newGRoom" >新增</a>
                                      <a class="btn btn-danger" id="deleteGRoomList">删除</a>
                      				</span>
                                 </th>
                               </tr>
                           </thead>
                           <tbody>
                            
                           </tbody>
                           <tfoot>
                           <tr>
                           	<td colspan="6"> 
        <div class="row " >
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area" ></div>
		</div>
                           	</td>
                           </tr>
                           </tfoot>
                        </table>
                      </section>
                  </div>
              </div>
              
              
          </section>
      </section>
      <!--main content end-->
  </section>
  <!-- container section end -->
    <!-- javascripts -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- nicescroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <!--custome script for all page-->
    <script src="js/scripts.js"></script>


  </body>
</html>
